<template>
  <div class="app-container-box">
    <div class="box-tag" />
    <span class="title-text">观众名单</span>
    <div class="warp-line-top" />

    <div class="title-box">
      <span class="auth-method-text">当前授权方式：</span>
      <div class="auth-method-box">
        <span>无限制</span>
        <!-- <span>白名单</span> -->
      </div>
      <el-button class="change-auth-type" type="text">更改授权类型</el-button>
    </div>

    <div class="table-list-box">
      <el-table
        :data="singInData"
        style="width: 100%"
        :header-cell-style="elTableHeaderStyle"
        :cell-style="elTableCellStyle"
      >
        <el-table-column
          prop="id"
          label="ID"
          align="center"
        />
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="hospital"
          label="单位(医院)"
          align="center"
        />
        <el-table-column
          prop="department"
          label="部门(科室)"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="电话"
          align="center"
        />
        <el-table-column
          prop="online_duration"
          label="授权方式"
          align="center"
        />
      </el-table>
    </div>
    <router-view />

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listSignIn } from '@/api/lives'
export default {
  name: 'SubjectSetting',
  components: {
  },
  data() {
    return {
      singInData: [],
      currentLive: undefined,
      SingInQuery: {
        start: 1,
        live_id: '',
        length: 14
      }
    }
  },
  computed: {
    ...mapGetters([
      'choicedLive'
    ])
  },
  watch: {
    async 'choicedLive'(n, o) {
      this.currentLive = this.choicedLive
      this.SingInQuery.live_id = this.choicedLive.id
      var res = await listSignIn(this.SingInQuery)
      this.singInData = res.data
      this.totalWatched = res.count
    },
    SingInQuery: {
      async handler(n, o) {
        var res = await listSignIn(this.SingInQuery)
        this.singInData = res.data
      },
      deep: true
    }
  },
  async mounted() {
    if (this.choicedLive.id) {
      this.SingInQuery.live_id = this.choicedLive.id
      var res = await listSignIn(this.SingInQuery)
      this.singInData = res.data
      this.totalWatched = res.count
    }
  },
  methods: {
    elTableHeaderStyle() {
      return {
        background: '#F0F1F2',
        font_size: '18px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#6D7A8E'
      }
    },
    elTableCellStyle() {
      return {
        font_size: '20px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#8B9DBA'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-box {
  height: 1010px;
}
.box-tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  position: relative;
  top: 25px;
}
.title-text{
  width: 171px;
  height: 23px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4A5462;
  top: 31px;
  left: 54px;
  position: absolute;
}

.warp-line-top {
  width: 1627px;
  height: 4px;
  background: #EDF5FB;
  top: 85px;
  position: absolute;
}
.title-box {
    width: 1423px;
    height: 79px;
    border: 1px solid #9CABC3;
    border-radius: 3px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 98px;
    left: 55px;
    .auth-method-text {
        width: auto;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6D7A8E;
        left: 28px;
        position: absolute;
    }
    .auth-method-box {
        width: 82px;
        height: 30px;
        background: #F0F1F2;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        left: 153px;
        span {
            width: auto;
            height: 18px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #6D7A8E;
        }
    }
    .change-auth-type {
        position: absolute;
        right: 37px;
        ::v-deep {
            span {
                width: 119px;
                height: 20px;
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #2E9BEA;
            }
        }
    }
}
.table-list-box {
  position: absolute;
  top: 198px;
  left: 55px;
  width: 1518px;
  height: 654px;
}
</style>
